import React, { useMemo } from 'react'
import { View, Text } from "@tarojs/components";
import Taro from '@tarojs/taro';
import { VibrateShort } from '@/utils';

const PageNav: React.FC<React.PropsWithChildren<{
      className?: string,
      showBack?: boolean,
      getHeight?: (number) => void
      handleBack?: () => void
     }>> = ({className, showBack, getHeight, children, handleBack}) => {
    const capsuleObj = Taro.getMenuButtonBoundingClientRect();
    const navBack = () => {
        VibrateShort()
        if (handleBack) {
            handleBack()
        } else if (isFirstPage) {
            Taro.switchTab({
                url: '/pages/home/index'
            })
        } else {
            Taro.navigateBack()
        }
    }
    const isFirstPage = useMemo(() => {
        return Taro.getCurrentPages().length === 1 
    }, [])
    
    Taro.useLoad(() => {
        getHeight && getHeight(capsuleObj.height + capsuleObj.top)
    })
    return <View className={`page-nav-container font-size32 need-filter flex-column ${className || ''}`} style={{ height: capsuleObj.height + capsuleObj.top + 'px' }}>
        <View className="flex1"></View>
        <View className="flex-row flex-item font-size28" style={{ minHeight: capsuleObj.height + 'px', width: '100%' }}>
            {
                showBack ?
                    <View onClick={navBack} className="page-nav-btn-container flex-row flex-item">
                        <Text className={`iconfont font-size36 back-btn ${isFirstPage ? 'icon-home' : 'icon-base-left'}`}></Text>
                    </View> : null
            }
            {children}
        </View>
    </View>
}

export default PageNav